import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { FilterItem } from 'components'
import {
  Form,
  Button,
  Row,
  Col,
  Divider,
  Input,
  Select,
  DatePicker,
  Icon
} from 'antd'

const FormItem = Form.Item
const {RangePicker} = DatePicker

const filterStyle = {
  style: {
    marginBottom: 16
  }
}

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
}
const Option = Select.Option

const GeneralFilter = ({
                         filterItems,
                         onFilterChange,
                         isExpand,
                         form: {
                           getFieldDecorator,
                           getFieldsValue,
                           setFieldsValue
                         },
                         expand,
                         noExpand
                       }) => {
  let filterItemsDealed
  if (isExpand) {
    filterItemsDealed = filterItems
  } else {
    if (filterItems.length > 3) {
      filterItemsDealed = filterItems.slice(0, 2)
    } else {
      filterItemsDealed = filterItems
    }
  }

  const handleFields = (fields) => {
    for (let key in fields) {
      let field = fields[key]
      // 删除请求中为空的对象
      if (!field || (_.isString(field) && field.replace(/(^\s*)|(\s*$)/g, '').length == 0)
        || _.isUndefined(field)
        || _.isNull(field)
        || (_.isArray(field) && field.length === 0)) {
        delete fields[key]
        continue
      }
      // 处理日期类型
      if (_.endsWith(key, 'Time') && _.isArray(fields[key]) && fields[key].length > 0) {
        let timeStartValue = fields[key][0].valueOf()
        let timeEndValue = fields[key][1].valueOf()
        let timeStartKey = key + 'Start'
        let timeEndKey = key + 'End'
        fields[timeStartKey] = timeStartValue
        fields[timeEndKey] = timeEndValue
        delete fields[key]
      }
    }
    return fields
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields[key] = values
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  const dateChange = (date, dateString) => {
    console.log(date, dateString)
  }
  const getFilterItemCol = (filterItems) => {
    const result = filterItems.map((filterItem, index) => <Col key={index} span={8}>
      <FormItem label={filterItem.title} {...formItemLayout}>
        {filterItem.type === 'input' && getFieldDecorator(`${filterItem.id}`, {})(<Input
          placeholder={filterItem.placeholder} onPressEnter={handleSubmit}/>)}
        {filterItem.type === 'select' && getFieldDecorator(`${filterItem.id}`, {initialValue: filterItem.defaultValue})(
          <Select
            initialValue={filterItem.defaultValue}
            style={{
              width: '50%'
            }}>
            {getOptions(filterItem.options)}
          </Select>
        )}
        {filterItem.type === 'dateRule' && getFieldDecorator(`${filterItem.id}`, {})(<RangePicker
          style={{
            width: '100%'
          }}
          showTime
          initialValue={[
            moment(filterItem.bdTime || '', filterItem.dateFormat || 'YYYY/MM/DD'),
            moment(filterItem.edTime || '', filterItem.dateFormat || 'YYYY/MM/DD')
          ]}
          format={filterItem.dateFormat || 'YYYY/MM/DD'}
          onChange={dateChange}/>)}
        {filterItem.type === 'date' && getFieldDecorator(`${filterItem.id}`, {})(<DatePicker
          style={{
            width: '100%'
          }}
          onChange={dateChange}/>)}
      </FormItem>
    </Col>)
    return ((result))
  }

  // 处理下拉选项
  const getOptions = (value) => value.map(option => {
    return <Option value={option.value} key={option.value}>{option.name}</Option>
  })

  const filterItemCols = getFilterItemCol(filterItemsDealed)

  return (
    <Row gutter={24} {...filterStyle}>
      {filterItemCols}
      <Col span={8} style={{
        textAlign: 'left'
      }}>
        <Button type="primary" onClick={handleSubmit}>查询</Button>
        <Divider type="vertical"/>
        <Button type="ghost" onClick={handleReset}>重置</Button>
      </Col>
    </Row>
  )
}

GeneralFilter.propTypes = {
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func
}

export default Form.create()(GeneralFilter)
